<template>
  <div class="xy_table" :ref="refName">
    <!-- 表头 -->
    <div class="xy_table_head">
      <div
        class="table_head_item"
        v-for="(item, index) in tableVal.headVal"
        :key="index"
        :style="{
          minWidth: item.width,
          maxWidth: item.width,
          textAlign: item.textAlign || 'center'
        }"
      >
        <div class="table_head_el" v-if="item.checkbox">
          <van-checkbox
            @change="checkAll"
            icon-size="13px"
            v-model="check"
            shape="square"
          ></van-checkbox>
        </div>
        <div class="table_head_el" v-else-if="item.order"></div>
        <div class="table_head_el" v-else>
          {{ typeof item.title == 'undefined' ? item : item.title }}
        </div>
      </div>
    </div>
    <!-- 表身 -->
    <div class="table_body_body" ref="tableBody">
      <!-- <div v-if="!tableVal || tableVal.data.length == 0" class="nodata">暂无数据</div> -->
      <div class="hasData">
        <slot :row="tableVal"></slot>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'XyTable',
  /**
	 * 使用方法
	  <xy-table :tableVal="tableData">
			<template #default="{ row }">
				<div class="table_body_item" v-for="(item, index) in row.data" :key="index">
					<div class="table_body_cell">1</div>
					<div class="table_body_cell">
						<van-button type="info" size="mini">车辆入场</van-button>
					</div>
				</div>
			</template>
		</xy-table>

	  tableData: {
			headVal: [
				{
					title: '道闸名称',
					width: '30%'
				},
				{
					title: '道闸方法',
					width: '70%',
					textAlign: 'center'
				}
			],
			data: [{}, {}]
		}
	 */
  props: {
    tableVal: {
      // 表格数据展示 表头数据 headVal ｜ 内容数据 data
      type: Object,
      default: () => {}
    },
    refName: {
      // 两个以上的表格区分
      type: String,
      default: 'xyTable'
    }
  },
  watch: {
    tableVal: {
      deep: true,
      handler: function (val) {
        if (val) {
          this.$nextTick(() => {
            this.setStyle();
            this.isOpenCheckbox && this.checkJudge();
          });
        }
      }
    }
  },
  destroyed() {
    this.$refs.tableBody.removeEventListener('scroll', this.scrollEvent);
  },
  mounted() {
    this.tableVal.headVal.map((item) => {
      if (item.checkbox) {
        this.isOpenCheckbox = true;
      }
    });

    this.setStyle();
    this.isOpenCheckbox && this.checkAll();

    this.scrollEvent = this.scrollEvent.bind(this);
    this.$refs.tableBody.addEventListener('scroll', this.scrollEvent);
  },
  data() {
    return {
      isOpenCheckbox: false /* 是否有复选框 */,
      check: false /* 复选框 */
    };
  },
  methods: {
    // 设置表格样式
    setStyle() {
      const table = this.$refs[`${this.refName}`]; // 当前表格元素

      const tableItem = table.getElementsByClassName('table_body_item'); // 当前table下的单元格

      for (let i = 0; i < tableItem.length; i++) {
        // 为子元素加上和表头相同的宽度样式

        this.tableVal.headVal.map((item, index) => {
          tableItem[i].children[index].style.minWidth = item.width;
          tableItem[i].children[index].style.maxWidth = item.width;
          tableItem[i].children[index].style.textAlign = item.textAlign;
          tableItem[i].children[index].style.height = tableItem[i].offsetHeight + 'px';
        });
      }
    },

    // 滚动事件
    scrollEvent(e) {
      const INSET = e.target.querySelector('.hasData');

      if (e.target.scrollTop > INSET.offsetHeight - e.target.offsetHeight - 30) {
        this.$emit('reachBottom');
      }
    },

    // 全选
    checkAll() {
      if (this.check) {
        this.tableVal.data.map((item) => {
          this.$set(item, 'isChecked', true);
        });
      } else {
        this.tableVal.data.map((item) => {
          this.$set(item, 'isChecked', false);
        });
      }

      this.$emit('checkChange', this.tableVal.data);
    },

    // 判断是否取消了所有选择
    checkJudge() {
      let num = 0;
      this.tableVal.data.map((item) => {
        if (item.isChecked) {
          num++;
        }
      });

      if (num == 0) {
        this.check = false;
      } else if (num === this.tableVal.data.length) {
        this.check = true;
      }
    }
  }
};
</script>

<style lang="scss">
/** table start */
.xy_table {
  min-width: 100%;
  max-width: 100%;
  font-size: 12px;
  color: #888;
  background-color: transparent;
  border: $--xy-table-border;
  border-radius: 3px;
  overflow: hidden;

  .van-icon.van-icon-success {
    @include xy-dfc;
  }

  .xy_table_head {
    background: #265591;
    color: #fff;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    box-shadow: 1px 1px 3px rgba($color: #373737, $alpha: 0.5);

    .van-checkbox {
      display: inline-block !important;
    }

    .table_head_el {
      width: 100%;
      height: 100%;
      padding: 6px 5px;
      box-sizing: border-box;
      @include xy-dfc;
    }

    .table_head_item {
      box-sizing: border-box;
      border-bottom: $--xy-table-border;
      flex: 1;
      text-align: center;
      padding-right: 1px;
      overflow: hidden;

      &:last-child {
        border-right: none;
      }
    }
  }

  .table_body_body {
    max-height: 150px;
    overflow-y: auto;

    .nodata {
      padding: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
    }

    .table_body_item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #fff;

      &:last-child {
        .table_body_cell {
          border-bottom: none;
        }
      }

      .table_body_cell {
        box-sizing: border-box;
        flex: 1;
        text-align: center;
        padding: 6px 5px;
        border-bottom: $--xy-table-border;
        @include xy-overpoint;

        &:last-child {
          border-right: none;
        }
      }
    }

    .van-button {
      height: 18px;
    }
  }

  /** table end */
}
</style>
